<template>
  <div>
    <el-card class="box-card">
      <div class="append">
        <el-button size="small" type="primary" @click="dialogVisible = true">添加经纪</el-button>
        <!-- 搜索 -->
        <el-input v-model="pageDate.name_contains" placeholder="请输入关键字" class="search">
          <el-button slot="append" icon="el-icon-search" @click="queryFn" />
        </el-input>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        :title="addition.id?'编辑经纪':'新增经纪'"
        :visible.sync="dialogVisible"
        width="40%"
        @close="cancel"
      >
        <el-form ref="addDepts" :model="addition" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="经纪名称" prop="name">
            <el-input v-model="addition.name" />
          </el-form-item>

          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="addition.email" />
          </el-form-item>

          <el-form-item label="电话" prop="phone">
            <el-input v-model="addition.phone" />
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input v-model="addition.address" />
          </el-form-item>

          <el-form-item label="描述" prop="desc">
            <el-input v-model="addition.desc" />
          </el-form-item>
          <!-- 头像上传 -->
          <el-form-item label="封面图" prop="image">
            <ImageUpload ref="upload" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addFn">确 定</el-button>
        </template>
      </el-dialog>

      <hr>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="image"
          label="图片"
          width="180"
          height="200"
        >
          <!-- 插入图片 -->
          <template v-slot="{row}">
            <img :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          label="操作"
        >
          <!-- template中包含有注入的数据 -->
          <template v-slot="scoped">
            <el-button size="small" type="primary" @click="compile(scoped.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteFn(scoped.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <hr>
      <!-- 分页器 -->
      <div class="block">

        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageDate._limit"
          @current-change="currentChange"
        />
      </div>

    </el-card>
  </div>
</template>

<script>

import { agents, addFn, deleteFn, redactPort, echo, getTotal } from '@/api/user'
// 上传头像引入组件
import ImageUpload from '@/components/ImageUpload'
export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      // 编辑数据
      // 总条数（数量）
      pageDate: {
        _limit: 2,
        _start: 0,
        name_contains: ''
      },
      total: 99,
      // 弹窗业务
      addition: {
        id: '',
        name: '', // 经纪名称
        email: '9527@qq.com', // 电子邮箱，比如 example@qq.com
        phone: '', // 电话
        address: '', // 地址
        desc: '', // 描述
        image: '' // 封面图
      },
      // 弹窗的显示与隐藏
      dialogVisible: false,
      query: '',
      tableData: [],
      rules: {
        name: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { max: 50, message: '最多不能超过50字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { max: 50, message: '最多不能超过50字符', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 渲染表格列表
    this.rendering()
    // total总条数
    this.getTotal()
  },
  methods: {
    // 获取列表总条数
    async getTotal() {
      const { data } = await getTotal({ name_contains: this.pageDate.name_contains })
      this.total = data
    },
    // 渲染列表
    async rendering() {
      // 发送请求
      const res = await agents(this.pageDate)
      this.tableData = res.data
    // console.log(139, res.data)
    },
    // 获取查询列表
    async queryFn() {
      // 查询数据(发送请求)
      const inquire = await agents({ name_contains: this.query })
      this.tableData = inquire.data
      // console.log(111, inquire.data)
    },
    resetForm() {

    },
    async addFn() {
      // 有id就是编辑，没有id就是新增（判断对象后端返回的值，是否包含有id，有就就行编辑功能，没有就执行编辑功能）
      if (this.addition.id) {
        // 编辑
        // 当前后端返回的图片路径，等于子组件腾讯云放回的地址（重新赋值给当前的图片）
        this.addition.image = this.$refs.upload.fileList[0].url
        // 发送编辑请求
        await redactPort(this.addition)
        // console.log(163, this.addition)
      } else {
        // 在发送请求前，先拿到后端的返回地址
        this.addition.image = this.$refs.upload.fileList[0].url
        // 新增（发送请求，传送参数）
        this.addition = await addFn(this.addition)
      }
      // 校验表单
      this.$refs.addDepts.validate()
      // 重新调用接口，渲染数据
      const res = await agents()
      this.tableData = res.data
      // 提示用户
      this.$message.success('操作成功')
      // 关闭弹窗
      this.dialogVisible = false
    },
    // 删除功能(通过id删除)
    async deleteFn(index) {
      // console.log(index)
      // 二次询问确认
      await this.$confirm('是否确认删除？')
      // 发送请求
      await deleteFn(index)
      // 提示用户
      this.$message.success('删除成功')
      // 更新页面
      const res = await agents()
      this.tableData = res.data
    },
    // 编辑功能
    async compile(index) {
      // 显示弹窗
      this.dialogVisible = true
      // 回显数据
      const plus = await echo(index)
      console.log(191, plus)
      this.addition = plus.data
      this.$refs.upload.fileList.push({ url: this.addition.image })
    },
    // 取消
    cancel() {
      this.dialogVisible = false
      this.addition = {
        id: '',
        name: '', // 经纪名称
        email: '9527@qq.com', // 电子邮箱，比如 example@qq.com
        phone: '', // 电话
        address: '', // 地址
        desc: '', // 描述
        image: '' // 封面图
      }
      this.$refs.upload.fileList = []
    },
    // 获取当前的点击页码
    currentChange(index) {
      this.pageDate._start = (index - 1) * this.pageDate._limit
      this.rendering()
    }

  }
}
</script>

<style lang="scss" scoped>
hr{
  margin: 20px 0;
}
.yc{
  background-color: pink;
}
  .box-card {
    width: 100%;
    .append{
      display: flex;
      justify-content: space-between;
      .search{
       width: 500px;
      }
    }
  }
  img{
  width: 80px;
  height: 80px;
  background-size: cover;
  }

</style>
